<template>
    <div>   
        <div class="header">
                <span class="fa fa-chevron-left" @click="back"></span>
                <span>我的世纪购</span>
                <span></span>
        </div>
        <div>
            <div id="mine">
                <img :src="'/imgs/avatars/'+userinfo.avatar" v-if="userinfo.avatar">
                <img :src="'/imgs/avatars/header.png'" v-if="!userinfo.avatar">
                <p>
                    <span>{{userinfo.account}}</span>
                    <span @touchstart="logoutBtn">退出登录</span>
                </p>
            </div>
            <p id="huiyuan">注册会员</p>
        </div>
        <div id="">
            <ul>
              <li><router-link to="/upload"><span class="fa fa-user-plus">我的头像</span><span class="fa fa-chevron-right"></span></router-link></li>
                <li><a href=""><span class="fa fa-list-alt"> 我的订单</span><span class="fa fa-chevron-right"></span></a></li>
                <li><a href=""><span class="fa fa-commenting-o"> 我的消息</span><span class="fa fa-chevron-right"></span></a></li>
                <li><a href=""><span class="fa fa-star-o"> 我的收藏</span><span class="fa fa-chevron-right"></span></a></li>
                <li><a href=""><span class="fa fa-location-arrow"> 我的地址</span><span class="fa fa-chevron-right"></span></a></li>
                <li><a href=""><span class="fa fa-phone-square"> 客服：400-099-3601</span><span class="fa fa-chevron-right"></span></a></li>
            </ul>
        </div>
    </div>
</template>

<script>
import {mapState} from "vuex";
export default {
    computed:{
        ...mapState([
            "userinfo"
        ])
    },
    methods:{
        back:function(){
            history.back();
        },
        logoutBtn:function(){
            this.http.post("/api/users/loginout")
            .then(res=>{
                layer.msg(res.data.msg)
                location.reload();
            })
        }
    },
    mounted:function(){
        this.$store.dispatch("requestIslogin");
    }
}
</script>

<style scoped>
    .header {
        padding: 7px 15px;
        width: 100vw;
        height: 44px;
        background-color: #B6758D;
        position: fixed;
        display: flex;
        justify-content: space-between;
        align-items: center;
        top: 0;
        left: 0;
        color: white;
        font-size:20px;
    }
    #mine{
        margin-top:40px;
        width:100%;
        height:150px;
        color:white;
        background-image:url("/static/images/bg.jpg");
        display:flex;
        justify-content:space-around;
        align-items:center;
    }
    img{
        width:35%;
        height:70%;
        border-radius: 50%;
        background-image:20%;
        
    }
   #mine p>span{
        margin:0 22px;
    }
    #huiyuan{
        width:80px;
        margin:0;
        margin-top:-55px;
        margin-left:150px;
        background-color:#B6758D;
        border-radius:5px;
        color:white;
    }
    ul{
        list-style:none;
        margin-top:40px;
        text-align:left;
        padding:8px;
        font-size:14px;
        
    }
    li{
        height:40px;
        line-height:40px;
        border-bottom:solid 1px #cccccc;
    }
    a{
        color:#999999;
        display:flex;
        justify-content:space-between;
        
    }
    a span{
        text-align:right;
        line-height:40px;
    }
   
</style>